<template>
	<tab-module-container :show-page-tools="true">
		<template #Slot-Conf-Module-Tools-Left>
			<global-input-search
				v-model:value="tableAttr.searchObj.roleName"
				placeholder="角色名称"
				@search="setTableData(true)"
			></global-input-search>
		</template>

		<template #Slot-Conf-Module-Tools-Right>
			<a-button v-if="g6Permission.showBtn('add-role')" type="primary" @click="PageButtonClick('add-role')"> 新增 </a-button>
		</template>

		<template #Slot-Conf-Module-Content>
			<div class="_table">
				<global-table
					:data-source="tableAttr.data"
					:selected-row-keys="tableAttr.selectedKeys"
					:loading="tableAttr.loading"
					:columns="columns"
					:show-operation="true"
					:use-select="false"
				>
					<template #operation="{ record }">
						<div v-if="Number(record?.id) !== 1" class="operations">
							<div
								v-if="g6Permission.showBtn('edit-role')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('edit-role', record)"
							>
								{{ '编辑' }}
							</div>

							<div
								v-if="g6Permission.showBtn('single-delete')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('single-delete', record)"
							>
								{{ '删除' }}
							</div>

							<div
								v-if="g6Permission.showBtn('member-list')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('member-list', record)"
							>
								{{ '成员列表' }}
							</div>
						</div>
					</template>
				</global-table>

				<global-pagination
					:current="tableAttr.current"
					:page-size="tableAttr.pageSize"
					:total="tableAttr.total"
					@change="setTablePagination"
				></global-pagination>
			</div>
		</template>
	</tab-module-container>
</template>

<script setup lang="ts" name="role-table">
import { NavigationFailure } from 'vue-router';
import { g6UseTable } from 'glasssix-vue3-hooks';
import { g6Permission } from 'glasssix-utils-ts';
import { useDeleteModal } from '@/global-hooks/base.hooks';
import { RoleAPI } from '../../../api';
import { TabModuleContainer } from '../../../components/index';

const { setOpenDeleteModal } = useDeleteModal();
const { tableAttr, setTableData, setTablePagination } = g6UseTable(RoleAPI.list);

const router = useRouter();
const columns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'roleName', title: '角色', width: 180, ellipsis: true },
	{ dataIndex: 'personSum', title: '用户数', ellipsis: true }
];

const PageButtonClick = (btnCode: string, record: Record<string, any> = {}): Promise<void | NavigationFailure | undefined> | undefined => {
	if (btnCode === 'member-list') {
		return router.push(`/config-manage/system/roles/members-table?id=${record.id}`);
	}
	if (btnCode === 'add-role') {
		return router.push('/config-manage/system/roles/add');
	}
	if (btnCode === 'edit-role') {
		return router.push(`/config-manage/system/roles/update?roleId=${record.id}`);
	}

	const deleteModalInfo = { title: '角色下有账号，不能删除', okText: '删除', cancelText: '取消' };
	const deleteModalInfo1 = { title: `请确认是否删除角色：${record.roleName}?`, okText: '删除', cancelText: '取消' };
	const deleteFun = async (): Promise<void> => {
		let res: TsRes = await RoleAPI.delete([record.id]);
		if (res.code === 0) {
			setTableData();
			// tableAttr.data = tableAttr.data.filter((row: Record<string, any>) => row.id !== record.id);
			// tableAttr.total = tableAttr.total - 1;
		}
	};
	if (btnCode === 'single-delete') {
		if (record.personSum >= 1) {
			setOpenDeleteModal(deleteFun, deleteModalInfo);
		} else {
			setOpenDeleteModal(deleteFun, deleteModalInfo1);
		}
	}
};
onMounted(() => {
	setTableData();
});
</script>

<style lang="less" scoped>
.role-title {
	color: rgba(240, 246, 252, 0.95);
}

._table {
	display: flex;
	height: calc(100vh - 76px - 44px - 180px);
	padding: 20px 0 0;
	flex-direction: column;
	justify-content: space-between;
}
</style>
